<template>
  <div class="yemian">
      <div class="dingbu">
          <div class="biaoti">
              <img src="../assets/image/纸飞机.png" class="tubiao">
              <span class="wz">NBM在线考试系统</span>
          </div>
          <NavBar />
          <div class="touxiang">
              <img src="../assets/image/头型.png" style="height: 50px; width: 50px;">
              <UserInfo />
          </div>
      </div>
      
      <div class="zw">
          <div class="action-button publish-exam" @click="fb">
              <div class="bj">
                  <img src="../assets/image/16.png" style="width: 200px; height: 200px;">
                  <div style="margin-left: 50px; font-size: 25px;">发布考试</div>
              </div>
          </div>
          
          <div class="action-button publish-exam" @click="pg">
              <div class="bj">
                  <img src="../assets/image/12.png" style="width: 200px; height: 200px;">
                  <div style="margin-left: 50px; font-size: 25px;">批改试卷</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router' // 添加路由导入
import NavBar from '../components/NavBar.vue'
import UserInfo from '../components/UserInfo.vue'

const router = useRouter() // 获取路由实例

const fb = () => {
router.push('/fbks'); // 修改为更规范的路径
};

const pg = () => {
router.push('/pgsj'); // 修改为专用路径
};
</script>

<style scoped>
/* 保持原有样式不变 */
.yemian {
  width: 100%;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

.dingbu {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;

  box-sizing: border-box;
}

.biaoti {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tubiao {
  height: 40px;
  width: 40px;
}

.wz {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.touxiang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.LBT {
  width: 100%;
  height: 170px;
  margin: 20px 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wz {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}
.touxiang {
width: 200px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.action-button {
width: 300px;
height: 300px;
border-radius: 50%;
margin-left: 60px;
}
.publish-exam {
background-color: #dadada;
margin-left: 60px;
}
.bj{
width: 300px;
height: 300px;
margin-top: 40px;
margin-left: 50px;
cursor: pointer; /* 添加指针样式 */
transition: transform 0.3s; /* 添加悬停动画 */
}
.bj:hover {
transform: scale(1.05); /* 悬停放大效果 */
}
.zw{
width: 50%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
</style>